<template>
  <div class="home-two">
    <RotationChart itemtype="itmes2" />
    <div class="to">
      <div class="Moveinner_1">
        <LoadingComponent
          v-slot="{ loadingFlag }"
          class="Moveinner_1_1"
          v-for="it in Moveinner_1Dates"
          :key="it.id"
        >
          <a
            href="https://p.qiao.baidu.com/cps/chat?siteId=17865090&userId=39789408&siteToken=1592882751da134d1450a7e08b16ffcb"
          >
            <img :src="it.img" v-if="loadingFlag" />
          </a>
        </LoadingComponent>
      </div>
      <LiuxueToutiao />
      <RemenxuexiaoTuijian />
      <div class="liuxuefangan">
        <div class="liuxuefangan_lef">
          <span>定制留学方案</span>
          <input type="text" placeholder="请输入姓名" />
          <input type="text" placeholder="请输入账号" />
          <div>
            <select>
              <option v-for="(it, is) in ysgjDates" :value="it" :key="is">{{ it }}</option>
            </select>
            <select>
              <option v-for="(it, is) in szsfDates"  :value="it" :key="is">{{ it }}</option>
            </select>
          </div>
          <button>立即提交</button>
        </div>
        <div class="liuxuefangan_rig">
          <p>
            今日已有
            <span>9</span>
            <span>9</span>
            <span>2</span>
            人成功获取
          </p>
          <div class="demo-list" ref="demo-list">
            <div class="demo-list1" v-for="its in 3" :key="its">
              <p v-for="it in 4" :key="it">
                李荣基是个老淫棍 {{ analysisPhoneFun(17639985251) }}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <GuojixiaoyuanZhanshilan />
    <GuojimingxiaoZhanshilan />
    <div class="liuxuefengcai">
      <div class="liuxuefengcai_title">留学风采</div>
      <div class="liuxuefengcai_list">
        <div
          class="liuxuefengcai_lists"
          ref="liuxuefengcai_lists"
          :style="{ width: ModAbroadDates.length * 5 + 'rem' }"
        >
          <div
            class="liuxuefengcai_list_1"
            v-for="it in ModAbroadDates"
            :key="it.abroad_id"
          >
            <img :src="'http://www.shxw114.com:9527/' + it.abroad_logo" />
          </div>
        </div>
      </div>
    </div>
    <bufenjiuyedanwei />
    <p class="" style="text-align: center; font-weight: 600; font-size: 20px">
      24小时免费在线 : 400-1506-559
    </p>
    <FooterTwo />
    <InquiryHk />
  </div>
</template>

<script setup>
import RotationChart from "../../components/RotationChart/index.vue";
import LiuxueToutiao from "../../components/liuxuetoutiao/index.vue";
import RemenxuexiaoTuijian from "../../components/remenxuexiaotuijian/index.vue";
import GuojixiaoyuanZhanshilan from "../../components/guojixiaoyuanzhanshilan/index.vue";
import GuojimingxiaoZhanshilan from "../../components/guojimingxiaozhanshilan/index.vue";
import bufenjiuyedanwei from "../../components/bufenjiuyedanwei/index.vue";
import FooterTwo from "../../components/FooterTwo/index.vue";
import InquiryHk from "../inquiryHk/index.vue";
import { ref, onMounted, getCurrentInstance } from "vue";
import { ModAbroadGet } from "../../server/index.js";
import { axiosFun } from "../../axios/index.js";
const Moveinner_1Dates = ref([]);
const ModAbroadDates = ref({});
const ysgjDates = [
  "意向国家",
  "英国",
  "澳大利亚",
  "韩国",
  "新加坡",
  "加拿大",
  "美国",
];
const szsfDates = [
  "所在省份",
  "北京",
  "天津",
  "河北省",
  "山西省",
  "内蒙古自治区",
  "辽宁省",
  "吉林省",
  "黑龙江省",
  "上海",
  "江苏省",
  "浙江省",
  "安徽省",
  "福建省",
  "江西省",
  "山东省",
  "河南省",
  "湖北省",
  "湖南省",
  "广东省",
  "广西壮族自治区",
  "海南省",
  "重庆",
  "四川省",
  "贵州省",
  "云南省",
  "西藏自治区",
  "陕西省",
  "甘肃省",
  "青海省",
  "宁夏回族自治区",
  "新疆维吾尔族自治区",
  "台湾省",
  "香港特别行政区",
  "澳门特别行政区",
  "海外",
];
(async (v) => {
  const { data } = await ModAbroadGet();
  const data1 = data[0] || {};
  const data2 = data[1] || {};
  const data3 = data[2] || {};
  data.push(data1);
  data.push(data2);
  data.push(data3);
  ModAbroadDates.value = data;
})();
(async (v) => {
  const { data } = await axiosFun().post("/JSON/hometwo-shang/index.json");
  Moveinner_1Dates.value = data;
})();
onMounted(function () {
  const { refs } = getCurrentInstance();
  const demo_listDom = refs["demo-list"];
  const liuxuefengcai_listsDom = refs["liuxuefengcai_lists"];

  let scrollTop = 0;

  const scrollFun = function () {
    if (scrollTop >= demo_listDom.children[0].offsetHeight * 2) {
      scrollTop = 0;
    } else {
      scrollTop += 1;
    }
    demo_listDom.scrollTop = scrollTop;
    setTimeout(scrollFun, 10);
  };

  scrollFun();

  let translateX = 0;
  const translateXFun = function () {
    if (
      translateX >=
      liuxuefengcai_listsDom?.children[0]?.offsetWidth *
        (ModAbroadDates.value.length - 3)
    ) {
      translateX = 0;
    } else {
      translateX += 1;
    }
    liuxuefengcai_listsDom.style.transform =
      "translateX(" + -translateX + "px)";
    setTimeout(translateXFun, 1);
  };
  translateXFun();
});

// 解析 号码

const analysisPhoneFun = function (v) {
  v = String(v);
  if (v.length !== 11) return undefined;
  const hs = v.slice(0, 3);
  const hw = v.slice(11 - 4);
  return hs + "****" + hw;
};
</script>

<style scoped>
.home-two {
  width: 100%;
  height: auto;
  margin-bottom: 3rem;
}
.to {
  width: 14.5rem;
  height: auto;
  margin: 0.4rem auto 0;
}
.Moveinner_1 {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.Moveinner_1 > div {
  width: 7rem;
  height: 3rem;
  margin-bottom: 0.4rem;
}
.Moveinner_1 > div > a {
  display: block;
  height: 100%;
  width: 100%;
}
.Moveinner_1 > div > a > img {
  width: 100%;
  height: 100%;
}
.liuxuefangan {
  width: 100%;
  height: auto;
  border-top: 0.1rem solid rgb(11, 193, 157);
  display: flex;
  justify-content: space-between;
  padding-top: 2rem;
  box-sizing: border-box;
  margin-bottom: 0.8rem;
}
.liuxuefangan_lef {
  width: 50%;
  height: auto;
}
.liuxuefangan_lef > span {
  display: block;
  width: 100%;
  line-height: 1.1rem;
  font-size: 1rem;
  color: #666;
  text-align: center;
  margin-bottom: 0.6rem;
}
.liuxuefangan_lef > input {
  width: 6.8rem;
  height: 1.4rem;
  margin: 0.2rem 0;
  padding-left: 0.4rem;
  box-sizing: border-box;
  font-size: 0.4rem;
  border: 0.001rem solid #ccc;
}
.liuxuefangan_lef > div {
  display: flex;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding-right: 0.4rem;
  box-sizing: border-box;
}
.liuxuefangan_lef > div > select {
  width: 3rem;
  height: 1.2rem;
  border: none;
  outline: none;
  border: 0.001rem solid #ccc;
  font-size: 0.4rem;
  color: #666;
}
.liuxuefangan_lef > button {
  width: 5rem;
  height: 1.2rem;
  display: block;
  margin: 0.4rem auto 0;
  border: none;
  outline: none;
  background-color: #0bc19d;
  color: #fff;
  font-size: 0.8rem;
}
.liuxuefangan_rig {
  width: 50%;
  height: auto;
}
.liuxuefangan_rig > p {
  width: 100%;
  line-height: 1.2rem;
  font-size: 0.5rem;
  border-bottom: 0.001rem dashed #cfcfcf;
}
.liuxuefangan_rig > p > span {
  color: #fff;
  padding: 0 0.1rem;
  background-color: #0bc19d;
  margin: 0 0.1rem;
}
.demo-list {
  width: 100%;
  height: 5rem;
  background: #fff;
  overflow: hidden;
  margin-top: 0.8rem;
}
.demo-list1 {
  width: 100%;
  height: auto;
}
.demo-list1 p {
  font-size: 0.5rem;
  text-align: center;
  line-height: 1.5rem;
}
.liuxuefengcai {
  width: 100%;
  height: auto;
}
.liuxuefengcai_title {
  width: 100%;
  height: 1.4rem;
  background-color: #15b397;
  color: #fff;
  font-size: 0.8rem;
  text-align: center;
  line-height: 1.4rem;
}
.liuxuefengcai_lists {
  display: inline-block;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.liuxuefengcai_list {
  width: 100%;
  height: 10rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.liuxuefengcai_list_1 {
  width: 7rem;
  height: 100%;
}
.liuxuefengcai_list_1 img {
  width: 100%;
  height: 100%;
}
</style>